<template>
  <view class="container">
    <!-- 状态切换栏 -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: activeTab === 'qiangdan' }"
        @click="changeTab('qiangdan')"
      >
        <image v-if="activeTab === 'qiangdan'" class="tab-icon" src="/static/renwu/taiqiu.png"></image>
        <text class="tab-text" :class="{'orange-text':activeTab==='qiangdan'}">候单待抢</text>
        <view v-if="activeTab === 'qiangdan'" class="active-line" style="background-color: #ffaa00;"></view>
      </view>
	  
      <view
        class="tab-item"
        :class="{ active: activeTab === 'serve' }"
        @click="changeTab('serve')"
      >
        <text class="tab-text" :class="{'orange-text':activeTab==='serve'}">待启服务</text>
        <view v-if="activeTab === 'serve'" class="active-line"></view>
      </view>
	  
	  <view
	    class="tab-item"
	    :class="{ active: activeTab === 'wait' }"
	    @click="changeTab('wait')"
	  >
	    <text class="tab-text">等待确认</text>
	    <view v-if="activeTab === 'wait'" class="active-line"></view>
	  </view>
	  
      <view
        class="tab-item"
        :class="{ active: activeTab === 'completed' }"
        @click="changeTab('completed')"
      >
        <text class="tab-text">订单完成</text>
        <view v-if="activeTab === 'completed'" class="active-line"></view>
      </view>
	  
      <view
        class="tab-item"
        :class="{ active: activeTab === 'canceled' }"
        @click="changeTab('canceled')"
      >
        <text class="tab-text">订单取消</text>
        <view v-if="activeTab === 'canceled'" class="active-line"></view>
      </view>
    </view>
	
	
	
	<!-- 订单列表展示区 -->
	  <view class="order-list">
	    <!-- 加载状态 -->
	    <view v-if="isLoading" class="loading-container">
	      <text>加载中...</text>
	    </view>
	    
	    <!-- 请求失败提示 -->
	     <view v-if="requestFailed" class="error-container">
	        <image class="error-icon" src="/static/common/error.png"></image>
	        <text class="error-text">网络请求失败，请检查网络后重试</text>
	        <button @click="retryRequest" class="retry-button">重新加载</button>
	      </view>
			
	    <!-- 订单列表 -->
	    <view v-if="!isLoading && !requestFailed">
	      <view v-if="orderList.length === 0" class="empty-container">
	        <text>暂无订单数据</text>
	      </view>
	      
	      <view v-else>
	        <view v-for="(order, index) in orderList" :key="order.id" class="order-item">
	          <!-- 订单头部信息 -->
	          <view class="order-header">
	            <text class="order-title">{{order.title}}</text>
	            <text class="order-status">{{order.status === 'pending' ? '候单待抢' : order.status === 'accepted' ? '带启服务' : order.status === 'completed' ? '订单完成' : '订单取消'}}</text>
	          </view>
	          
	          <!-- 订单基本信息 -->
	          <view class="order-info">
	            <text class="info-label">订单描述：</text>
	            <text class="info-value">{{order.description}}</text>
	          </view>
	          
	          <view class="order-info">
	            <text class="info-label">期望时间：</text>
	            <text class="info-value">{{order.expected_time}}</text>
	          </view>
	          
	          <view class="order-info">
	            <text class="info-label">用户报价：</text>
	            <text class="info-value">¥{{order.user_price}}</text>
	          </view>
	          
	          <view class="order-info">
	            <text class="info-label">备注：</text>
	            <text class="info-value">{{order.remark || '无'}}</text>
	          </view>
	          
	          <!-- 地址信息 -->
	          <view class="address-section">
	            <text class="section-title">服务地址</text>
	            <view class="address-detail">
	              <text>{{order.address.address}}</text>
	              <text>{{order.address.details}}</text>
	              <text>联系人：{{order.address.contact_name}}</text>
	              <text>电话：{{order.address.contact_phone}}</text>
	            </view>
	          </view>
	          
	          <!-- 时间信息 -->
	          <view class="time-info">
	            <text>创建时间：{{order.created_at}}</text>
	            <text>更新时间：{{order.updated_at}}</text>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	</view>
  
</template>

<script >
	import { api } from '@/api/api.js'
	
	
	
	export default {
	  name: 'qiangdan',
	  data() {
	    return {
	      activeTab: 'qiangdan',
	      orderList: [],
	      isLoading: false,
	      requestFailed: false, 
	      queryParams: {
	        status: 'pending',
			
	        // user_id: '1',
	        // worker_id: '5',
	        // per_page: 15,
	        // current_page: 1
	      },
		  // API基础配置
		 //  apiConfig: {
			// baseURL: 'http://8.137.61.186:8000',
			// timeout: 10000,//10秒
			// headers: {
			// 'Content-Type': 'application/json'//跨域
			// }
		 //  }
	    }
	  },
	  methods: {
	    // 切换标签页
	    changeTab(tab) {
	    	this.activeTab = tab;
	    	switch (tab) {
	    		case 'qiangdan':
	    			status = 'pending';
	    			break;
	    		case 'serve':
	    			status = 'accepted';
	    			break;
				case'wait':
					status = 'completed';
					break;
	    		case 'completed':
	    			status = 'done';
	    			break;
	    		case 'canceled':
	    			status = 'canceled';
	    			break;
	    	}
	    	this.queryParams.status = status;
	    	this.getOrders();
	    },
	    
	    
	    
	    goToTransfer() {
	      uni.navigateTo({ url: '/pages/mask/tiaohuo/index' });
	    },
	    
	    goToMasterEntry() {
	      uni.navigateTo({ url: '/pages/mask/ruzhu/index' });
	    },
	    
	    // 重试请求方法
	    retryRequest() {
	      this.requestFailed = false;
	      this.getchOrders();
	    },
	    
	    // 获取订单数据
	    getOrders() {
	    	this.isLoading = true;
	    	this.requestFailed = false;
	    
	    	uni.showLoading({
	    		title: '加载中...',
	    		mask: true
	    	});
	    
	    	this.token = uni.getStorageSync('token');
	    	this.$http.get("https://billiards.cqtrust.cn/orders", {
	    			status: this.queryParams.status
	    			
	    		})
	    		.then((res) => {
	    		    this.orderList = res.data.map(item => ({
	    		      id: item.id,
	    		      title: item.title,
	    		      status: item.status,
	    		      description: item.mover_service || item.title,
	    		      expected_time: item.expected_time,
	    		      user_price: '0',
	    		      remark: item.remark || '无',
	    		      address: {
	    		        address: item.address_details?.address || '',
	    		        details: item.address_details?.details || '',
	    		        contact_name: item.address_details?.contact_name || '',
	    		        contact_phone: item.address_details?.contact_phone || ''
	    		      },
	    		      created_at: item.user_details?.created_at || '未知时间',
	    		      updated_at: item.updated_at || '未知时间'
	    		    }));
	    		    
	    		    uni.hideLoading();
	    		    this.isLoading = false;
	    		  })
				
	    		.catch((res) => {
	    			console.log(res);
	    			return Promise.reject(false);
	    		});
	    	},
	    
	    // 处理请求错误
	    handleRequestError(message) {
	      uni.hideLoading();
	      this.isLoading = false;
	      this.requestFailed = true;
	      
	      console.error('请求失败:', message);
	      uni.showToast({
	        title: '请求失败: ' + message,
	        icon: 'none',
	        duration: 3000
	      });
	    },
	    
	    // 获取错误信息
	    getErrorMessage(err) {
	      const errorMap = {
	        'request:fail abort': '请求被取消',
	        'request:fail timeout': '请求超时',
	        'request:fail': '网络连接失败'
	      };
	      return errorMap[err.errMsg] || '未知错误';
	    }
	  },
	  onShow(){
	  	this.getOrders();
	  }
	}
</script>

	<style lang="scss" scoped>
	.container {
	  padding: 20rpx;
	  background-color: #fff;
	}

	// 订单状态切换栏
	.tab-bar {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  border-bottom: 2rpx solid #e0e0e0;
	  margin-bottom: 20rpx;
	}
	.tab-item {
	  padding: 10rpx 10rpx;
	  font-size: 28rpx;
	  position: relative;
	  display: flex;
	  align-items: center;
	}
	.tab-text {
	  transition: color 0.3s;
	}
	.orange-text {
	  color: #ffaa00 !important;
	}
	.active {
	  color:#ffaa00;
	}
	.active-line {
	  width: 75%;
	  height: 3rpx;
	  background-color: #ffaa00;
	  position: absolute;
	  bottom: 0;
	  left: 50%;
	  transform: translateX(-50%);
	}

	.tab-item:nth-child(1) .active-line {
	  background-color: #ffaa00 !important;
	}

	.tab-icon {
	  width: 30rpx;
	  height: 30rpx;
	  margin-right: 10rpx;
	}

	// 订单列表展示区样式
	/* 错误提示容器 */
	.error-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 60rpx 40rpx;
	  background-color: #f8f8f8;
	  border-radius: 16rpx;
	  margin: 40rpx 20rpx;
	  text-align: center;
	}
	
	/* 错误图标 */
	.error-icon {
	  width: 120rpx;
	  height: 120rpx;
	  margin-bottom: 30rpx;
	}
	
	/* 错误提示文字 */
	.error-text {
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 40rpx;
	  line-height: 1.6;
	}
	
	/* 重试按钮 - 美化版 */
	.retry-button {
	  width: 240rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	  text-align: center;
	  background: linear-gradient(90deg, #ffaa00, #ff8800);
	  color: #fff;
	  font-size: 30rpx;
	  border-radius: 40rpx;
	  border: none;
	  box-shadow: 0 4rpx 12rpx rgba(255, 170, 0, 0.3);
	  transition: all 0.3s;
	}
	
	.retry-button:active {
	  opacity: 0.9;
	  transform: scale(0.98);
	}
	
	/* 空状态提示 */
	.empty-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 80rpx 0;
	}
	
	.empty-icon {
	  width: 180rpx;
	  height: 180rpx;
	  opacity: 0.5;
	  margin-bottom: 30rpx;
	}
	
	.empty-text {
	  font-size: 28rpx;
	  color: #999;
	}
	
	
	//内容
	.order-item {
	  padding: 20rpx;
	  margin-bottom: 30rpx;
	  border-radius: 12rpx;
	  background-color: #fff;
	  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}
	
	.order-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	  padding-bottom: 15rpx;
	  border-bottom: 1rpx solid #f5f5f5;
	}
	
	.order-title {
	  font-size: 32rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.order-status {
	  padding: 6rpx 15rpx;
	  border-radius: 20rpx;
	  font-size: 24rpx;
	  background-color: #ffaa00;
	  color: #fff;
	}
	
	.order-info {
	  display: flex;
	  margin-bottom: 12rpx;
	  font-size: 28rpx;
	}
	
	.info-label {
	  color: #666;
	  min-width: 120rpx;
	}
	
	.info-value {
	  color: #333;
	  flex: 1;
	}
	
	.address-section {
	  margin-top: 20rpx;
	  padding-top: 15rpx;
	  border-top: 1rpx dashed #eee;
	}
	
	.section-title {
	  display: block;
	  margin-bottom: 10rpx;
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333;
	}
	
	.address-detail {
	  padding: 15rpx;
	  background-color: #f9f9f9;
	  border-radius: 8rpx;
	}
	
	.address-detail text {
	  display: block;
	  margin-bottom: 8rpx;
	  font-size: 26rpx;
	  color: #555;
	}
	
	.time-info {
	  margin-top: 15rpx;
	  padding-top: 10rpx;
	  font-size: 24rpx;
	  color: #999;
	  text-align: right;
	}
	
	.time-info text {
	  display: block;
	}
</style>